<template>
	<div class="endLive">
		<div class="endLiveCont">
			<image src="@/static/image/user/bj.png" mode="" class="bjImg"></image>
			<div class="endLiveCenter">
				<div class="endLiveCont_back" @click="backBtn()">
					<image src="@/static/image/left.png" mode=""></image> <span>白名单</span>
				</div>
				<!-- <div class="goHome">
					返回首页
				</div> -->
			</div>
		</div>

		<div class="scrollView">
			<div class="prizeDraw_top_title">
				<input type="text" placeholder="请输入手机号搜索" v-model="params.mobile"
					placeholder-class="zj-placeholder-class" @search='couponEvent'>
				<div class="inputSeach" @click='couponEvent()'>
					<image src="@/static/image/sousuo.png" mode=""></image>
				</div>
			</div>
			<scroll-view @scrolltolower="scrolltolower" class="scrollView_box" :scroll-y="true"
				:scroll-with-animation="true">
				<div class='whiteItems' v-for="(ite,idx) in whiteList" :key="idx">
					<div class='whiteItems_top'>
						<div :class='ite.nickname?"whiteItems_lable whiteItems_lable_act":"whiteItems_lable" '>
							{{ite.nickname?'已绑定':'未绑定'}}
						</div>
						<div class='whiteItems_text ex'>
							{{ite.mobile}}
						</div>
					</div>
					<div class='whiteItems_cont'>
						<div class='whiteItems_cont_itemsCont'>
							<div class='whiteItems_cont_items_left'>
								<span>观众姓名：</span><div class="whiteItems_cont_items_left_ex ex">{{ite.username}}</div>
							</div>
							<div class='whiteItems_cont_items_right' v-if="ite.nicknam">
								<span>绑定用户：</span>
								<image :src="ite.avatar" mode=""></image>
								<div> {{ite.nickname}} </div>
							</div>
							<div class='whiteItems_cont_items_right' v-else>
								<span>绑定用户：-</span>
							</div>
						</div>
						<div class='whiteItems_cont_items'>
							<span>添加时间：</span>{{ite.createTime}}
						</div>
						<div class='whiteItems_cont_items'>
							<span>绑定时间：</span>{{ite.nicknam?ite.updateTime:'-'}}
						</div>
					</div>
					<div class='whiteItems_btn' @click='deleteEvent(ite,idx)'>
						<div class='whiteItems_btn_text'>
							删除
						</div>
					</div>
				</div>


				<div class="listSpace" v-if="whiteList.length <= 0 && loading">
					<list-space></list-space>
				</div>

				<div class="zj_space">

				</div>
				<div class="zj_space">

				</div>

			</scroll-view>

		</div>
		<!-- 添加 -->
        <toastMask toaskTitle='添加白名单' @toastClose='toastClose'  v-if="whiteToastShow" @toastIndustry='toastIndustry'></toastMask>
		<div class="liveInformationBtn" @click='whiteToastShow = true'>
			<div class="liveInformationBtnCont">
				添加白名单
			</div>
		</div>
	</div>
</template>

<script>
	import toastMask from './components/toastMask.vue'
	export default {
		components:{
			toastMask
		},
		filters: {
			formatDate(v) {
				if (v == 0) {
					return '-'
				}
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			formatTime(v) {
				if (v == 0) {
					return '-'
				}
				let hours = Math.floor(v / 3600);
				let minutes = Math.floor((v % 3600) / 60);
				let seconds = v % 60;
				const formattedTime = `${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			amountFilter(v) {
				if (!v) return '-'
				return Number(v) / 100
			}
		},
		data() {
			return {
				params: {
					mobile: "",
					page: 1,
					pageSize: 10,
				},
				whiteList: [],
				total: 0,
				loading: false,
				whiteToastShow:false
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.whiteList = []
			this.loading = false
			this.getListAudience()
		},
		onLoad(opt) {
			if (opt.liveId) {
				this.params.liveId = opt.liveId
			}
			this.getListAudience()
		},
		methods: {
			toastClose(){
				this.whiteToastShow = false
			},
			couponEvent() {
				this.$utils.throttle((res) => {
					this.params.page = 1
					this.whiteList = []
					this.loading = false
					this.getListAudience()
				}, 800)
			},
			// 点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？
			scrolltolower(e) {
				if (this.whiteList.length < this.total) {
					this.params.page++
					this.getListAudience()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			// 删除后不可恢复，
			deleteEvent(ite, idx) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: async (res) => {
						console.log('res', res)
						if (res.confirm) {
							// drawActivityId: "1801106215296569344"
							const {
								data
							} = await this.$request(this.$Api.deletePayWatch, {
								id: ite.id
							}, "POST")
							if (data.code !== 200) return
							// 执行软删除
							this.whiteList.splice(idx, 1)
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
			
						}
					}
				})
			},
			// 获取直播商品数据
			async getListAudience() {
				const {
					data
				} = await this.$request(this.$Api.liveWhitelist, this.params, "get")
				this.loading = true
				if (!data.data) return
				this.whiteList = this.whiteList.concat(data.data.list)
				this.total = data.data.total
				uni.stopPullDownRefresh()
			},
			backBtn() {
				uni.navigateBack()
			},
			// 添加白名单
			async toastIndustry(e){
				const {
					data
				} = await this.$request(this.$Api.payWatchCreate, {
					liveId:this.params.liveId,
					mobile:e.mobile,
					username:e.username
				}, "POST")
				if (data.code !== 200) return
				uni.showToast({
					title: '创建成功',
					icon: 'none'
				})
				this.whiteToastShow = false
				this.couponEvent()
			}
		}
	}
</script>

<style lang="scss">
	.endLive {
		width: 100%;
		height: 100vh;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
		background: #F6F9FF !important;
	}

	.whiteItems {
		width: 686rpx;
		min-height: 40rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 24rpx;
		color: #464C5B;
		font-size: 28rpx;
		padding-bottom: 32rpx;

		.whiteItems_top {
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #D7DDE4;
			height: 76rpx;

			.whiteItems_lable {
				width: 104rpx;
				height: 34rpx;
				background: #FF5A5F;
				border-radius: 8rpx;
				text-align: center;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #fff;
			}

			.whiteItems_lable_act {
				background: #00C795;
			}

			.whiteItems_text {
				width: 450rpx;
				margin-left: 16rpx;

			}
		}

		.whiteItems_cont {
			padding: 24rpx 16rpx 0 16rpx;
			font-size: 24rpx;

			span {
				color: #8C8C8C;
				font-size: 24rpx;
			}

			.whiteItems_cont_items {
				margin-bottom: 24rpx;
			}

			.whiteItems_cont_itemsCont {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.whiteItems_cont_items_left {
					width: 50%;
					text-align: left;
					display: flex;
					.whiteItems_cont_items_left_ex{
						max-width: 200rpx;
					}
				}

				.whiteItems_cont_items_right {
					width: 50%;
					text-align: right;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 48rpx;
						height: 48rpx;
						background: #f5f5f5;
						border-radius: 50%;
						margin-right: 6rpx;
					}
				}
			}
		}
		.whiteItems_btn{
			display: flex;
			justify-content:flex-end;
			padding: 0 20rpx;
			box-sizing: border-box;
			.whiteItems_btn_text{
				width: 88rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #295EFF;
				color: #295EFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 44rpx;
				
			}
		}
	}

	.prizeDraw_top_title {
		width: 100%;
		height: 96rpx;
		font-size: 28rpx;
		color: #464C5B;
		text-align: left;
		font-weight: 500;
		line-height: 64rpx;
		// padding: 0 32rpx;
		// padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 32rpx;


		input {
			width: 100%;
			height: 100%;
			border: 1rpx solid #979797;
			border-radius: 36rpx;
			padding: 0 124rpx 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			background: #fff;

		}

		.inputSeach {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 36rpx;
			top: 6rpx;
		}

	}

	.scrollView_box {
		height: calc(100vh - 312rpx);
	}

	.scrollView {
		height: calc(100vh - 138rpx);
		// background: red;
		position: absolute;
		top: 138rpx;
		width: 688rpx;
		// background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 32rpx;
		// padding: 32rpx 20rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;

	}

	.endLiveCont {
		width: 100%;
		height: 100vh;
		position: relative;
		padding: 30rpx 0;
		box-sizing: border-box;
		color: #fff;
		overflow: hidden;



		.endLiveCenter {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
			padding: 30rpx 0;
			box-sizing: border-box;
			overflow: hidden;
		}

		.bjImg {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		.endLiveCont_back {
			width: 100%;
			height: 80rpx;
			float: left;
			position: relative;

			image {
				width: 58rpx;
				height: 58rpx;
				float: left;
				position: absolute;
				top: 10rpx;
			}

			span {
				font-size: 28rpx;
				margin-left: 72rpx;
				color: #1D2129;
				line-height: 80rpx;
			}
		}



		.goHome {
			width: 480rpx;
			height: 80rpx;
			background: #295EFF;
			border-radius: 40rpx;
			margin-top: 224rpx;
			margin: 224rpx auto;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			line-height: 80rpx;
		}
	}



	.liveUserItems:last-child {
		border: none !important;
	}

	.liveInformationBtn {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;

		.liveInformationBtnCont {
			width: 640rpx;
			height: 80rpx;
			background: #295FFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;

		}
	}
</style>
